<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta content="IE=edge" http-equiv="X-UA-Compatible">
  <meta content="width=device-width, initial-scale=1.0" name="viewport">
  <title>初识canvas</title>
  <style>
      #cs {
          background-color: aquamarine;
      }
  </style>
</head>

<body>
<canvas height="500" id="cs" width="600"></canvas>

</body>
<script>
  let cs = document.querySelector('#cs')
  let ctx = cs.getContext('2d') // 画笔
  // 起笔
  ctx.beginPath()
  ctx.moveTo(200, 300)
  ctx.quadraticCurveTo(150, 300, 150, 200)
  ctx.quadraticCurveTo(150, 100, 300, 100)
  ctx.quadraticCurveTo(450, 100, 450, 200)
  ctx.quadraticCurveTo(450, 300, 250, 300)
  ctx.quadraticCurveTo(250, 350, 150, 350)
  ctx.quadraticCurveTo(200, 350, 200, 300)

  ctx.stroke()
  // 抬笔
  ctx.closePath()


</script>

</html>